import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/utils/widget_state_property.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class SwitchPage extends PageWithTitle {
  const SwitchPage({super.key}) : super("开关(Switch)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("开关组件，用于开启|关闭两种状态的切换场景"),
      AppSpacer.large,
      _Example(),
      UlItem("Switch"),
      BodyText("开关组件，它的使用方式很简单，在状态组件中监听开关状态变化，重建组件更新开关状"
          "态即可，Flutter提供了丰富的样式设置，开关由背景、边框、按钮、按压图层4部分组成，"
          "一般要设置开启与关闭两种状态的样式"),
      PrimaryHeaderLabelText("value", "设置开启关闭状态"),
      PrimaryHeaderLabelText(
          "onChanged",
          "开关状态改变时回调开发者需通过重建组件更新状态，比如可以执行一个网络请求，再根据请求"
              "结果是否成功决定组件应该时开启还是关闭状态"),
      AppSpacer.normal,
      CategoryTitle("状态属性"),
      NoticeText("开关提供了带状态的属性设置，优先级一般比单独设置样式属性高，所以我们一般使用"
          "这些属性来实现页面的特殊样式"),
      PrimaryHeaderLabelText(
          "thumbColor",
          "开关按钮颜色>",
          "inactiveThumbColor+activeColor属性指定的颜色>",
          "主题配置switchTheme.thumbColor>",
          "colorScheme.outline+colorScheme.secondary"),
      PrimaryHeaderLabelText(
          "trackColor",
          "背景色>",
          "activeTrackColor+inactiveTrackColor>",
          "主题配置switchTheme.trackColor>",
          "colorScheme.surfaceContainerHighest+colorScheme.primary"),
      PrimaryHeaderLabelText(
          "trackOutlineColor",
          "边框颜色>",
          "主题配置switchTheme.trackOutlineColor>",
          "colorScheme.outline+Colors.transparent"),
      PrimaryHeaderLabelText("trackOutlineWidth", "边框线宽>",
          "主题配置switchTheme.trackOutlineWidth>", "默认2"),
      PrimaryHeaderLabelText(
          "overlayColor",
          "按压图层颜色>",
          "activeColor.withAlpha(kRadialReactionAlpha)>",
          "主题配置switchTheme.overlayColor>",
          "colorScheme.secondary.withAlpha(kRadialReactionAlpha)"),
      PrimaryHeaderLabelText("splashRadius", "按压图层半径>",
          "主题配置switchTheme.splashRadius>", "kRadialReactionRadius"),
      PrimaryHeaderLabelText(
          "thumbIcon", "按钮内部图标>", "主题配置switchTheme.thumbIcon"),
      AppSpacer.normal,
      CategoryTitle("单独设置样式"),
      NoticeText("因为优先级较低，没有在组件上直接用状态属性来提供样式的情况下，才会使用到这些"
          "单独定义的样式"),
      PrimaryHeaderLabelText("inactiveTrackColor", "未选中的背景色"),
      PrimaryHeaderLabelText("inactiveThumbColor", "未选中的按钮颜色"),
      PrimaryHeaderLabelText("activeColor", "选中后的按钮颜色"),
      PrimaryHeaderLabelText("activeTrackColor", "选中后的背景色"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    var open = false;
    return StatefulBuilder(builder: (context, setState) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const LabelText("默认样式"),
          Switch(
            value: open,
            onChanged: (value) {
              setState(() => open = value);
            },
          ),
          const LabelText("状态样式"),
          Switch(
            value: open,
            onChanged: (value) {
              setState(() => open = value);
            },
            thumbColor: WidgetStatePropertySingle(
              other: const Color.fromARGB(255, 0, 255, 0),
              selected: const Color.fromARGB(255, 255, 255, 255),
            ),
            trackColor: WidgetStatePropertySingle(
              other: theme.colorScheme.surfaceContainerHighest,
              selected: const Color.fromARGB(128, 0, 255, 0),
            ),
            trackOutlineColor: WidgetStatePropertySingle(
              other: theme.colorScheme.outline,
              selected: Colors.transparent,
            ),
            trackOutlineWidth: const WidgetStatePropertyAll(2),
            overlayColor: theme.switchTheme.overlayColor ??
                WidgetStatePropertyAll(theme.colorScheme.secondary
                    .withAlpha(kRadialReactionAlpha)),
            splashRadius:
                theme.switchTheme.splashRadius ?? kRadialReactionRadius,
            thumbIcon: WidgetStatePropertySingle(
              other: const Icon(
                Icons.close,
                color: Color.fromARGB(255, 255, 255, 255),
              ),
              selected: const Icon(
                Icons.check,
                color: Color.fromARGB(128, 0, 255, 0),
              ),
            ),
          ),
        ],
      );
    });
  }
}
